<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8">
    <title>告警历史</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="../assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
    <link href="../assets/global/css/plugins.css" rel="stylesheet" type="text/css">
    <link href="../assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
    <link href="../assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
    <link href="../assets/admin/layout3/css/customadmin.css" rel="stylesheet" type="text/css">
    <!-- END THEME STYLES -->
    <link rel="shortcut icon" href="img/logo.png" />
    <style>
        [v-cloak] {
            display: none;
        }

        tr {
            cursor: default;
        }
    </style>

<body>

    <div id="app">
        <!-- BEGIN PAGE CONTAINER -->
        <div class="page-container" v-cloak>
            <!-- BEGIN PAGE CONTENT -->
            <div class="page-content" style="background-color:#fff;">
                <div class="container">
                    <!-- BEGIN PAGE CONTENT INNER -->
                    <div class="row">
                        <div class="col-md-12 col-sm-12 occ-box">
                            <div class="occ-box-menu tabbable tabbable-tabdrop">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a @click="changeTab($event,'gaojing')" href="#tab_1" data-toggle="tab">
                                            告警历史 </a>
                                    </li>
                                    <li>
                                        <a @click="changeTab($event,'moni')" href="#tab_2" data-toggle="tab">
                                            模拟历史 </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane in fade" :class="{active:tab == 'gaojing'}" id="tab_1">
                                    <div class="col-md-12 col-sm-12" style="padding-left: 0; padding-right: 0;">
                                        <div class="portlet light ">

                                            <div class="portlet-body portlet-body-1">
                                                <div class="table-scrollable">
                                                    <table class="table table-striped table-bordered table-hover">
                                                        <thead>
                                                            <tr>
                                                                <th scope="col">
                                                                    序号
                                                                </th>
                                                                <th scope="col">
                                                                    线路名称
                                                                </th>
                                                                <th scope="col">
                                                                    故障点位置
                                                                </th>
                                                                <th scope="col">
                                                                    定位
                                                                </th>
                                                                <th scope="col">
                                                                    详情
                                                                </th>
                                                                <th scope="col">
                                                                    故障发生时间
                                                                </th>
                                                                <th scope="col">
                                                                    故障解除时间
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr v-for="(gj,gid) in gjlist" @click="setIndex(gid)">
                                                                <td v-text="gid + 1"></td>
                                                                <td :class="{'font-red':gj.endtimes == '0'}" v-text="gj.linkName"></td>
                                                                <td>
                                                                    在节点【{{gj.origin}}】和节点【{{gj.finishing}}】之间。距离节点{{gj.origin}}】大约{{gj.distance}}米。
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn blue btn-sm"
                                                                        @click.stop="gjDingwei($event,gid)">定位</button>
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn green btn-sm"
                                                                        @click.stop="gjdetail($event,gj.gaojingId)">详情</button>
                                                                </td>
                                                                <td v-text="gj.times"></td>
                                                                <td v-show="gj.endtimes == '0'">--</td>
                                                                <td v-show="gj.endtimes != '0'" v-text="gj.endtimes"></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- <div class="col-md-3 col-sm-3">
                                        
                                        <div class="portlet light tasks-widget" style="height: 400px;">
                                            <div class="portlet-title tabbable-line">
                                                <div class="caption caption-md">
                                                    <i class="icon-globe theme-font hide"></i>
                                                    <span class="caption-subject theme-font bold uppercase">链路列表</span>
                                                </div>
                                            </div>
                                            <div class="portlet-body portlet-body-1">
                                                <div class="font-grey-mint font-sm">
                                                    线路名称：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.lineName"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    位置：
                                                </div>
                                                <div class="font-md font-blue-sharp">
                                                    在节点【{{gaojing.origin}}】和节点【{{gaojing.finishing}}】之间。距离节点{{gaojing.origin}}】大约{{gaojing.distance}}米。
                                                </div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    故障发生时间：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.times"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    故障解除时间：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.endtimes"></div>
                                                <hr>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    链路名称：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.linkName"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    业务名称：
                                                </div>
                                                <div class="font-md font-blue-sharp">
                                                    <p v-for="item in link.works" v-text="item"></p>
                                                </div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    运行状态：
                                                </div>
                                                <div class="font-md font-green" v-text="link.status"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    状态：
                                                </div>
                                                <div class="font-md font-green" v-text="link.statusType"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    衰减值：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.attenuations"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    建设年代：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.times"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    维护人信息：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.cancat"></div>


                                            </div>
                                        </div>
                                        
                                    </div> -->


                                </div>
                                <div class="tab-pane in fade" :class="{active:tab == 'moni'}" id="tab_2">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="portlet light ">
                                            <div class="portlet-body">
                                                <div class="table-scrollable">
                                                    <table class="table table-striped table-bordered table-hover">
                                                        <table class="table table-striped table-bordered table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th scope="col">
                                                                        序号
                                                                    </th>
                                                                    <th scope="col">
                                                                        线路名称
                                                                    </th>
                                                                    <th scope="col">
                                                                        故障点位置
                                                                    </th>
                                                                    <th scope="col">
                                                                        定位
                                                                    </th>
                                                                    <th scope="col">
                                                                        详情
                                                                    </th>
                                                                    <th scope="col">
                                                                        故障发生时间
                                                                    </th>
                                                                    <th scope="col">
                                                                        故障解除时间
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr v-for="(gj,gid) in mnlist" @click="setIndex(gid)">
                                                                    <td v-text="gid + 1"></td>
                                                                    <td :class="{'font-red':gj.endtimes == '0'}" v-text="gj.linkName"></td>
                                                                    <td v-if="gj.describe != ''">
                                                                        在节点【{{gj.origin}}】和节点【{{gj.finishing}}】之间。距离节点{{gj.origin}}】大约{{gj.distance}}米。
                                                                    </td>
                                                                    <td v-if="gj.describe == ''">
                                                                        在节点【{{gj.origin}}】和节点【{{gj.finishing}}】之间。距离节点{{gj.origin}}】大约{{gj.distance}}米。
                                                                    </td>
                                                                    <td>
                                                                        <button type="button" class="btn blue btn-sm"
                                                                            @click.stop="gjDingwei($event,gid)">定位</button>
                                                                    </td>
                                                                    <td>
                                                                        <button type="button" class="btn green btn-sm"
                                                                            @click.stop="gjdetail($event,gj.gaojingId)">详情</button>
                                                                    </td>
                                                                    <td v-text="gj.times"></td>
                                                                    <td v-show="gj.endtimes == '0'">--</td>
                                                                    <td v-show="gj.endtimes != '0'" v-text="gj.endtimes"></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div class="col-md-3 col-sm-3">
                                        
                                        <div class="portlet light tasks-widget" style="height: 400px;">
                                            <div class="portlet-title tabbable-line">
                                                <div class="caption caption-md">
                                                    <i class="icon-globe theme-font hide"></i>
                                                    <span class="caption-subject theme-font bold uppercase">链路列表</span>
                                                </div>
                                            </div>
                                            <div class="portlet-body portlet-body-1">
                                                <div class="font-grey-mint font-sm">
                                                    线路名称：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.lineName"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    位置：
                                                </div>
                                                <div v-if="gaojing.describe != ''" class="font-md font-blue-sharp">
                                                    在节点【{{gaojing.origin}}】和节点【{{gaojing.finishing}}】之间。距离节点{{gaojing.origin}}】大约{{gaojing.distance}}米。
                                                </div>
                                                <div v-if="gaojing.describe == ''" class="font-md font-blue-sharp">
                                                    在节点【{{gaojing.origin}}】和节点【{{gaojing.finishing}}】之间。距离节点{{gaojing.origin}}】大约{{gaojing.distance}}米。
                                                </div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    故障发生时间：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.times"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    故障解除时间：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="gaojing.endtimes"></div>
                                                <hr>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    链路名称：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.linkName"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    业务名称：
                                                </div>
                                                <div class="font-md font-blue-sharp">
                                                    <p v-for="item in link.works" v-text="item"></p>
                                                </div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    运行状态：
                                                </div>
                                                <div class="font-md font-green" v-text="link.status"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    状态：
                                                </div>
                                                <div class="font-md font-green" v-text="link.statusType"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    衰减值：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.attenuations"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    建设年代：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.times"></div>
                                                <div class="font-grey-mint font-sm margin-top-10">
                                                    维护人信息：
                                                </div>
                                                <div class="font-md font-blue-sharp" v-text="link.cancat"></div>


                                            </div>
                                        </div>
                                        
                                    </div> -->

                                </div>


                            </div>


                        </div>

                    </div>

                    <!-- END PAGE CONTENT INNER -->
                </div>
            </div>
            <!-- END PAGE CONTENT -->
        </div>
        <!-- END PAGE CONTAINER -->
    </div>
    <script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.min.js"></script>
    <script src="assets/js/xlsx.full.min.js"></script>
    <script src="assets/js/config.js"></script>
    <script src="assets/js/http.js"></script>
</body>
<!-- END BODY -->
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function () {
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    mnlist: [],//模拟列表
                    gjlist: [],//告警列表
                    tab: "gaojing",
                    gaojing: {},
                    link: {},
                    idx: 0
                }
            },
            methods: {
                changeTab(e, tab) {
                    e.preventDefault()
                    this.tab = tab;
                    this.idx = 0;
                    this.getLink();
                },
                async load() {
                    try {
                        layer.load(0, { msg: "努力加载中，请稍后..." });
                        post(config.getUrl() + "/getGaojingList", {}, (res,resolve,reject) => {
                            console.log(res);
                            layer.closeAll();
                            console.log(res.data);
                            if (res.data.code == 0) {
                                var list = res.data.data;
                                if (list.length > 0) {
                                    for (var i = 0; i < list.length; i++) {
                                        if (list[i]['endtimes'] == "" || list[i]['endtimes'] == undefined) {
                                            list[i]['endtimes'] = "--";
                                        }
                                        if (list[i]['times'] == "" || list[i]['times'] == undefined) {
                                            list[i]['times'] = "--";
                                        }
                                        if (list[i]['gaojingType'] > 0) {
                                            this.gjlist.push(list[i]);
                                        } else {
                                            this.mnlist.push(list[i])
                                        }
                                    }
                                    console.log(this.gjlist);
                                    console.log(this.mnlist);
                                    resolve(true)
                                }else{
                                    layer.msg(res.data.msg, { time: 3000 });
                                    reject(false)
                                }
                            } else {
                                layer.msg(res.data.msg, { time: 3000 });
                                reject(false)
                            }
                        }).then(res => {
                            console.log(res);
                            this.setIndex(0);
                        });
                    } catch (error) {
                        console.log(error);
                        layer.msg(error, { time: 3000 });
                    }
                },
                getLink() {
                    try {
                        let linkId;
                        if (this.tab == 'gaojing') {
                            linkId = this.gjlist[this.idx]['linkId']
                            this.gaojing = this.gjlist[this.idx];
                        } else {
                            linkId = this.mnlist[this.idx]['linkId']
                            gaojing = this.mnlist[this.idx]
                        }
                        console.log(linkId);
                        layer.load(0, { msg: "努力加载中，请稍后..." });
                        axios.post(config.getUrl() + "/getLinks", { linkId }).then(res => {
                            if (res.status == 200) {
                                layer.closeAll();
                                if (res.data.code == 0) {
                                    if (res.data.data.length > 0) {
                                        let list = res.data.data[0];
                                        if (list['works'] != "") {
                                            list['works'] = JSON.parse(list['works'])
                                        }
                                        this.link = list;
                                        console.log(this.link);
                                    }

                                } else {
                                    layer.msg(res.data.msg, { time: 3000 });
                                }
                            } else {
                                layer.closeAll();
                                layer.msg("网络错误", { time: 3000 });
                            }
                        })
                    } catch (error) {
                        console.log(error);
                        layer.msg(error, { time: 3000 });
                    }

                },
                async gjDingwei(e, num) {
                    try {
                        console.log(num);
                        let gaojing;
                        let gaojingId;
                        if (this.tab == 'gaojing') {
                            gaojing = this.gjlist[num];
                        } else {
                            gaojing = this.mnlist[num]
                        }
                        gaojingId = gaojing.gaojingId;
                        if (gaojing.endtimes == "--") {
                            console.log(1);
                            layer.load(0, { msg: "努力加载中，请稍后..." });
                            axios.post(config.getUrl() + "/createGzcx", { gaojingId, linkName: gaojing.linkName }).then(res => {
                                if (res.status == 200) {
                                    layer.closeAll();
                                    if (res.data.code == 0) {
                                        //window.location.href = `${config.baseUrl}/mnyxing`
                                    } else {
                                        layer.msg(res.data.msg, { time: 3000 });
                                    }
                                } else {
                                    layer.closeAll();
                                    layer.msg("网络错误", { time: 3000 });
                                }
                            })

                        } else {
                            console.log(2);
                            layer.load(0, { msg: "努力加载中，请稍后..." });
                            axios.post(config.getUrl() + "/createGzcx", gaojing).then(res => {
                                if (res.status == 200) {
                                    layer.closeAll();
                                    if (res.data.code == 0) {
                                        layer.closeAll();
                                        layer.msg("OK")
                                        //window.location.href = `${config.baseUrl}/mnyxed`
                                    } else {
                                        layer.msg(res.data.msg, { time: 3000 });
                                    }
                                } else {
                                    layer.closeAll();
                                    layer.msg("网络错误", { time: 3000 });
                                }
                            })
                        }
                        /* layer.load(0,{msg:"努力加载中，请稍后......"});
                        axios.post(config.getUrl() + "/getGaojing",{gaojingId}).then(res => {
                            if(res.status == 200){
                                layer.closeAll();
                                console.log(res.data.data);
                                if(res.data.code == 0){
                                    let gaojing = res.data.data;

                                    
                                }else{
                                    layer.msg(res.data.msg,{time:3000});
                                }
                            }else{
                                layer.closeAll();
                                layer.msg("网络错误",{time:3000});
                            }
                        }); */
                    } catch (error) {
                        console.log(error);
                        layer.msg(error, { time: 3000 });
                    }

                },
                gjdetail(e, gaojingId) {
                    window.location.href = `${config.baseUrl}/gaojingdetail?gaojingId=${gaojingId}`
                },
                setIndex(num) {
                    this.idx = Number(num);
                    this.getLink();
                }
            },
            async created() {
                await this.load()
            }
        });
        app.mount("#app")
    });
</script>
<!-- END JAVASCRIPTS -->

</html>